<template>
  <ul class="image-list">
    <li v-for="(item, index) in data" :key="index">
      <img :src="item.url" alt="" />
    </li>
  </ul>
  <a-pagination
    @change="pageChange"
    v-model:current="current"
    :total="total"
    show-less-items
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { getAction } from "@/utils/request";
const current = ref<number>(1);
const total = ref<number>(0);
const data = ref([]);
const pageChange = (page: number, pageSize: number) => {
  getAction("/app/mock/283968/imagelist").then((res) => {
    total.value = res.total;
    data.value = res.data;
  });
};
pageChange(current.value, 10);
</script>

<style lang="less" scoped>
.image-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  & > li {
    margin: 10px;
    width: 100px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  & > li:nth-child(8) {
    margin-left: 0;
  }
}
</style>
